<template>
  <el-dialog title="创建表格数据集"
             v-model="visible"
             :close-on-click-modal="false"
             width="33%"
             size="mini"
             draggable>
    <el-form ref="dataFormRef"
             :model="form"
             :rules="dataRules"
             formDialogRef
             label-width="90px"
             v-loading="loading">
      <el-row :gutter="20">
        <el-col :span="24"
                class="mb20">
          <el-form-item label="上传文件"
                        prop="path">
            <input type="file"
                   @change="handleFileChange">

          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false"
                   size="mini">取消</el-button>
        <el-button type="primary"
                   @click="onSubmit"
                   :disabled="loading"
                   size="mini">确认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" >
import { useDict } from '/@/hooks/dict';
import { useMessage } from '/@/hooks/message';
import { getObj, addbgObj } from '/@/api/know/zhishiku';
import { rule } from '/@/utils/validate';
import other from '/@/utils/other';
import { Session } from '/@/utils/storage';
const emit = defineEmits(['refresh']);
import { useRoute } from 'vue-router';
const Fileupload = defineAsyncComponent(() => import('/@/components/Upload/indexZsk.vue'));

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false);
const loading = ref(false);
const selectedFile = ref(null);

// 请求头处理
const headers = computed(() => {
	return {
		Authorization: 'Bearer ' + Session.get('token'),
		'TENANT-ID': Session.getTenant(),
	};
});

const props = defineProps({
	modelValue: [String, Array],
	fileType: {
		type: Array,
		default: () => ['xlsx'],
	},

	uploadFileUrl: {
		type: String,
		default: '/admin/sys-file/upload',
	},
});

// 提交表单数据
const form = reactive({
	id: '',
	name: '',
	intro: '',
	tmbId: '',
	path: '',
});

// 定义校验规则
const dataRules = ref({});
const number = ref(0);
const formData = new FormData();

// 打开弹窗
const openDialog = (tmbId: string) => {
	visible.value = true;
	form.tmbId = tmbId;
	console.log('333:' + tmbId);
	// 重置表单数据
	nextTick(() => {
		dataFormRef.value?.resetFields();
	});
};

const handleFileChange = (event) => {
	selectedFile.value = event.target.files[0];
	uploadFile();
};

const uploadFile = async () => {
	if (!selectedFile.value) {
		alert('请选择一个文件');
		return;
	}

	formData.append('file', selectedFile.value);
	formData.append('tmbId', form.tmbId);
	form.file = selectedFile.value;
};
// 提交
const onSubmit = async () => {
	const valid = await dataFormRef.value.validate().catch(() => {});
	if (!valid) return false;

	try {
		loading.value = true;
		console.log(form.file);
		await addbgObj(formData);
		useMessage().success('添加成功');
		visible.value = false;
		emit('refresh');
	} catch (err) {
		useMessage().error(err.msg);
	} finally {
		loading.value = false;
	}
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>
<style scoped>
.text-1 {
	font-family: Segoe UI, Segoe UI;
	font-weight: 400;
	font-size: 14px;
	color: #606266;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
	margin: 0 0 20px 0;
}
.el-form-item__content {
	margin-left: 0;
}
.file-upload-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

.file-upload {
	position: absolute;
}

.file-upload-button {
	width: 85px;
	height: 30px;
	background: #409eff;
	border-radius: 4px 4px 4px 4px;
	text-align: center;
}
.filespan {
	width: 56px;
	height: 19px;
	font-family: Segoe UI, Segoe UI;
	font-weight: 400;
	font-size: 14px;
	color: #ffffff;
	line-height: 0px;
	text-align: left;
	font-style: normal;
	text-transform: none;
}
</style>